<template>
  <div class="list" ref="sawper">
    <div class="content">
      <div class="Currentcity">
        当前城市
      </div>
      <div class="sel-city">
        <div class="sel-city-text">
          上海
        </div>
      </div>
      <div class="Currentcity">
        热门城市
      </div>
      <div class="sel-city">
        <ul>
          <li v-for="item of hot" :key="item.id" @click="selcity(item.name)">
            {{item.name}}
          </li>
        </ul>
      </div>
        <div class="city-A" v-for="(value,key) of list" :key="key" :ref="key">
          <h3>{{key}}</h3>
          <ul v-for="item of value" :key="item.id">
            <li>{{item.name}}</li>
          </ul>
        </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default { //  组件配置项
  name: 'CurrentCity',
  props: {
    list: Object,
    hot: Array,
    search: String
  },
  mounted () {
    // let list = document.querySelector('.list')
    this.scroll = new BScroll(this.$refs.sawper)
  },
  methods: {
    selcity (city) {
      console.log(city)
      this.$router.push({ path: '/' })
    }
  },
  watch: {
    search () {
      this.scroll.scrollToElement(this.$refs[this.search][0], 500)
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .list
    position absolute
    left 0
    top 2rem
    right 0
    bottom 0
    z-index -1
    .Currentcity
      width 100%
      padding 0.25rem 0
      padding-left 0.2rem
      background #E4E7EA
    .sel-city
      width 100%
      padding 0.28rem 0
      padding-left 0.2rem
      .sel-city-text
        width 2.2rem
        padding 0.18rem 0
        border 1px solid #E4E7EA
        border-radius 5px
        text-align center
      ul
        padding-top 0.1rem
        height 2.1rem
        li
          width 2.2rem
          padding 0.18rem 0
          border 1px solid #E4E7EA
          border-radius 5px
          text-align center
          float left
          width 30%
          margin-left 0.1rem
          margin-top 0.2rem
    .city-A
      h3
        background #E4E7EA
        padding 0.23rem 0
      ul
        li
          border-bottom 1px solid #BABABA
          padding 0.23rem 0
</style>
